Home redesign, two-font typeset, and /docs landing route#28
Merged
vigneshrajsb merged 8 commits intomainfrom Apr 26, 2026
Merged
Home redesign, two-font typeset, and /docs landing route#28vigneshrajsb merged 8 commits intomainfrom
vigneshrajsb merged 8 commits intomainfrom
Conversation
Restructures the home page around a calmer, more focused narrative: hero with copyable install command, contrast section reframed as a structural shift, capabilities with a copyable lifecycle.yaml, two-doors split into "run it" and "community". Adds new sections (capabilities, contrast, two-doors, site-footer) and removes the duplicate Features grid that overlapped with Capabilities. Tightens nav hover, theme config, and supporting copy.
Adds Tailwind typography tokens (display, headline, title, body, label, codeline), a `.kicker` utility, and font-feature ligatures. Caps prose line length on docs. Fixes home page rendering with system fallback fonts: next/font variable was scoped inside a wrapping div, so `var(--font-sans)` on body resolved to undefined. Now defines font CSS variables on `:root` via styled-jsx in _app.tsx so the body inherits them through the cascade.
…fy chrome Fixes home layout regressions and adds motion to the hero background. Layout: replace `container mx-auto px-4` with `mx-auto max-w-6xl px-4 sm:px-6` across all home sections so widths match Hero. Drop `mx-auto` from HowItWorks and Contrast headers so kickers left-align with the grids below them. Prose width: scope the docs `max-width: 72ch / 60ch` rules to `main:not(.layout-full)` so the home page (`<main class="layout-full">`) is exempt. The home `<ol>`/`<ul>`/`<h2>` were being clamped, which is what made the timeline and capabilities pointers visually misaligned. Motion: new `GridPulses` component renders 6 Hi-Vis Yellow pulses traveling along the 56px grid lines behind the hero. Mixed axes/directions, gradient heads, mild glow, snapped to lane offsets. Inherits the same radial mask as the grid pattern so pulses fade at edges. `prefers-reduced-motion` respected via the existing global MotionConfig. Chrome: drop the `oss` badge from the navbar wordmark and the "Apache 2.0 · © 2025 GoodRx OSS" line from the footer. Simpler wordmark.
Long-form docs prose was reading anonymous in Inter. IBM Plex Sans gives the engineered DNA expected by devs and platform engineers without losing neutrality, and pairs naturally with the existing JetBrains Mono code font. Scoped to docs only via main:not(.layout-full) so the home page, nav, sidebar, and TOC stay on Inter and the brand layer is preserved. Also adds the reading hierarchy that was missing: 17px body / 1.7 line- height, tighter heading tracking, weight ladder (h1 700, h2-h4 600), text-wrap pretty/balance, tabular numerals on tables, and softer inline code chips. Wordmark in nav and footer is now JetBrains Mono uppercase with letter-spacing for a coded, set-in-stone feel.
Previously /docs returned 500 because no index page existed; the only way to land in the docs was the deep link /docs/what-is-lifecycle. With output: 'export', runtime rewrites/redirects aren't available, so this uses an MDX file at /docs that imports and renders the existing what-is-lifecycle.mdx as a component. Single source of truth, both URLs remain valid (canonical /docs, alias /docs/what-is-lifecycle), TOC builds correctly on both. Footer 'Docs' link points at the canonical.
Inter was carrying brand and chrome while IBM Plex Sans was scoped to docs prose. That made three fonts on the page (Inter, Plex, JetBrains Mono), which directly contradicted the "no third font" rule the system was designed around. Plex reads as engineered without losing neutrality, so it can carry the brand and chrome layers as well, restoring the two-face commitment. Drops the Inter import and the --font-docs variable; --font-sans now resolves to IBM Plex Sans across every surface. The docs-scoped CSS keeps its reading scale (1.0625rem / 1.7 / -0.005em, headings 700/600 with tighter tracking) but no longer needs to override font-family, since Plex is global.
…and ignore .claude/ Adds the brand/product brief and design tokens that captured the typeset and two-font decisions, and gitignores local Claude Code state so it doesn't leak into the repo.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Branch-wide design pass on the docs site. Three threads:
Home page redesign — Workshop-precision aesthetic. Replaced the old feature-grid + hero with a layered narrative: animated grid background with light pulses, hero with kicker + display copy, contrast section, how-it-works with numbered steps, capabilities grid, two-doors CTA, and a simplified site footer. All sections share a single
mx-auto max-w-6xlcontainer so home width is consistent across sections (the oldcontainersetting was leaking from Tailwind defaults). Prose-width clamp scoped tomain:not(.layout-full)so the home is exempt from docs reading constraints.Typography pivot to a two-font system — IBM Plex Sans for everything not coded; JetBrains Mono for code blocks, inline code, and the
Lifecyclewordmark in nav and footer (uppercase,0.08emtracking). Inter is gone. Docs prose runs at a slightly larger reading scale (1.0625rem / 1.7 /-0.005em) scoped viaarticle.nextra-content main:not(.layout-full), with a tightened heading hierarchy (h1 700/-0.024em, h2-h4 600/-0.018em), tabular numerals on tables, softer inline code chips, andtext-wrap: pretty/balanceon prose and headings./docslanding route — Previously 500 because no index page existed; the only way in was the deep link/docs/what-is-lifecycle. Withoutput: 'export'runtime rewrites/redirects aren't available, so this uses an MDX file at/docs/index.mdxthat imports and renders the existingwhat-is-lifecycle.mdxas a component. Single source of truth, both URLs valid (/docscanonical,/docs/what-is-lifecyclealias), TOC builds correctly on both. Footer "Docs" link points at/docs.Notable file changes
src/components/home/{hero,contrast,how-it-works,capabilities,two-doors,bg,bg/pulses}— new + reworked sectionssrc/components/home/features/*— removed (replaced bycapabilities)src/components/site-footer/index.tsx— new minimal footer with mono wordmarksrc/theme.config.tsx— wordmark in mono uppercase, simplified chromesrc/pages/_app.tsx— fonts collapsed to Plex + JetBrains Monosrc/styles/globals.css— docs reading hierarchy, scoped viamain:not(.layout-full)src/pages/docs/index.mdx— new MDX wrapper for/docstailwind.config.mjs+eslint.config.mjs— supporting tweaksTest plan
/renders the new home with all five sections, grid pulses animating, single 6xl container width/docsreturns 200 and renders the what-is-lifecycle content with full TOC/docs/what-is-lifecyclestill returns 200 (alias preserved)/docs--font-sansresolves to IBM Plex Sans,--font-monoto JetBrains Monoindexentry isdisplay: hidden)bun run lint,bun run typecheck,bun run testall pass